<template>
  <div>
    <table cellspacing=1>
      <caption>
        欢迎光临姚习东的收银系统, 你亏钱我放心
      </caption>
      <tr>
        <td>苹果 {{ price }}¥ / 斤, 折扣 {{ count }}折</td>
      </tr>
      <tr>
        <td>
          <!-- 利用表单双向绑定 -->
          请输入你要购买的斤数
          <input type="text" v-model="num">
        </td>
      </tr>
      <tr>
        <td>
          <!-- 点击结算按钮, 调用函数, 获取输入框内容 -->
          <button @click="getPrice">结账买单</button>
        </td>
      </tr>
      <tr>
        <td>结账单: 总价为: {{ allPrice }}¥元, 折后价: {{ afterPrice }}¥元, 节省了: {{ cut }}¥元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      count: 8,
      num: 0,
      allPrice: 0,
      afterPrice: 0,
      cut: 0,
    };
  },
  methods: {
    getPrice() {
      console.log(this.num);
      this.allPrice = (this.price * this.num).toFixed(2)
      this.afterPrice = (this.price * (this.count / 10).toFixed(2) * this.num).toFixed(2)
      this.cut = (this.allPrice - this.afterPrice).toFixed(2)
    }
  },
};
</script>

<style lang="less">
table {
  border-collapse:collapse;
  text-align: center;
  border: 1px solid #000;
  tr {
    border: 1px solid #000;
    td {
      border: 1px solid #000;
    }
  }
}
</style>
